<template>
  <div class="export-box">
    <el-button :type="buttonType ? 'text' : ''"
               :icon="buttonType ? '' : icon"
               @click="submit">
      导出
    </el-button>
    <ExportExcelModule v-model="visible"
                       @handleConfirmExport="handleConfirmExport" />
  </div>
</template>

<script>
import { table } from "@/api";
import { mapActions } from "vuex";
import _ from "lodash";
import { mapGetters, mapState } from "vuex";
import ExportExcelModule from '@components/exportExcel/Index.vue'

export default {
  name: "ExportExcelAction",
  components: { ExportExcelModule },
  // inject: ["$table"],
  props: {
    icon: {
      type: String,
      default: "el-icon-s-promotion"
    },
    args: {
      type: Object,
      default: () => { }
    },
    data: {
      type: Object,
      default: () => { }
    },
    list: {
      type: Array
    },
    url: String,
    type: [Number, String],
    name: String
  },
  data () {
    return {
      loading: false,
      visible: false,
      userInfo: sessionStorage.getItem('userInfo')
    };
  },
  computed: {
    buttonType () {
      return this.data?.buttonType || ''
    },
    ...mapState({
      menu: (state) => state.menu.menu
    }),
    ...mapGetters('table', ['getMenuFirstRecordSearch']),
    ...mapGetters('table', ['getMenuAdvanceRecordSearch']),
    user () {
      return JSON.parse(this.userInfo)
    },
    userId () {
      return this.user?.userId
    },
    menuId () {
      return this.menu.menuId
    },
    firstNewRecordSearch () {
      return this.getMenuFirstRecordSearch(this.userId, this.menuId)
    },
    advanceNewRecordSearch () {
      return this.getMenuAdvanceRecordSearch(this.userId, this.menuId)
    }
  },
  methods: {
    submit () {
      this.visible = true
    },
    handleConfirmExport: _.debounce(function (datas) {
      const { metaId, resourceId } = datas
      // console.log(this.$table,'$table')
      if (!this.list.length) {
        this.$message.warning("没有可要导出的数据！");
        return false;
      }
      this.loading = true
      const filters = { ...this.firstNewRecordSearch, ...this.advanceNewRecordSearch, ...this.args };
      const searchFilter = {};

      for (const [key, value] of Object.entries(filters)) {
        if (value || value === 0) {
          if (key.includes("dateInterval")) {
            searchFilter["queryStartTime"] = this.$moment(value[0]).format("YYYY-MM-DD");
            searchFilter["queryEndTime"] = this.$moment(value[1]).format("YYYY-MM-DD");
          } else if (key.includes("month")) {
            searchFilter["queryStartTime"] = this.$moment(value[0]).format("YYYYMM");
            searchFilter["queryEndTime"] = this.$moment(value[1]).format("YYYYMM");
          } else if (key.includes("year")) {
            searchFilter["year"] = value[0];
          } else {
            searchFilter[key] = value;
          }
        }
      }

      const params = {
        args: { ...searchFilter, ...this.data?.args },
        name: this.name || this.data?.name,
        type: this.data?.type || this.type,
        meta: {
          metaId: metaId || null,
          resourceId: resourceId
        }
      };
      this.exportConfigApi(this.url, params);
    }, 500),
    // 导出配置公共接口
    async exportConfigApi (url, params) {
      let { code } = await table.submitFormContainer(url, params)
      if (code === 0) {
        this.searchCount() //刷新导出未读数
        this.$nextTick(() => {
          this.$message.success("导出功能正在后台执行中，请稍后去“导出文件”下载中查看！");
          // this.loading = false;
          this.visible = false;
        });
      }
    },
    ...mapActions({
      searchCount: "login/exportCount"
    }),
  }
};
</script>

<style scoped lang="scss">
.export-box {
  display: inline;
  /deep/ .el-dialog__header {
    text-align: left;
  }
  /deep/ .el-dialog__body {
    text-align: left;
    height: 500px;
    overflow-y: auto;
    position: relative;
  }
  /deep/ .el-dialog__footer {
    text-align: center;
  }
}
</style>